<template>
	<view style="display: flex;justify-content: center;">
		<view class="box">
			<view>我的养殖场二维码</view>
			<view>
				<image :src="QRcodeImage"></image>
			</view>
			<view><text>保存二维码分享给好友</text></br><text>请勿直接分享此页面</text></view>
			<view @tap="saveImg()">保存至手机</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				QRcodeImage: "",
				timerr: "",
				imgUrl: '',
				downUrl:''
			};
		},
		onReady() {
			this.getQRcode();
			this.start()

		},
		onUnload() {
			// this.stop()
		},
		onBackPress() {
			// this.stop()
		},
		methods: {
			//保存二维码
			saveImg() {
				const that = this;
				uni.showModal({
					title: '提示',
					content: '您确定要保存该二维码到本地吗',
					success: function(res) {
						if (res.confirm) {
							// console.log(that.downUrl)
							uni.showLoading({
							    title: '加载中'
							});
							uni.downloadFile({
								url:that.downUrl,
								success: (data) => {
									console.log(data);
									this.imgUrl = data.tempFilePath;
									uni.saveImageToPhotosAlbum({
										filePath: this.imgUrl,
										success: function(res) {
											console.log(res)
											if(res){
												 setTimeout(function () {
												     uni.hideLoading();
												 }, 1000);
												uni.showToast({
													title:"保存成功",
												})
											}
										}
									});
								},
								fail: (err) => {
									console.log(err)
								}
							});
						} else if (res.cancel) {

						}
					}
				});


			},
			//停止定时器
			stop() {
				clearInterval(this.timerr);
				console.log("清除了定时器")
			},
			//定时器
			start() {
				// this.timerr = setInterval(() => {
					this.getQRcode()
				// }, 10000);
			},
			//获取二维码
			getQRcode() {
				// console.log(this.User.userInfo.farm_id)
				uni.request({
					url: this.confige.webUrl + "/aquaculture/getIdErc",
					data: {
						farm_id: this.User.userInfo.farm_id
					},
					header: {
						'X-Token': this.User.token
					},
					success: (res) => {
						// console.log(res)
						this.QRcodeImage = res.data.result[0].date;
						this.downUrl = res.data.result[0].url;
						// console.log(this.downUrl)
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #4AC997;
	}

	.box {
		background-image: url(../../../static/set/myScan/bgScan.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 980rpx;
		width: 84%;
		margin-top: 100rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;

		>view:nth-of-type(1) {
			color: #000000;
			font-size: 35rpx;
			margin-top: 60rpx;
			height: 100rpx;
		}

		>view:nth-of-type(2) {
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 400rpx;
				height: 400rpx;
			}
		}

		>view:nth-of-type(3) {
			margin-top: 40rpx;
			text-align: center;
			font-size: 26rpx;
			color: #A5A5A5;
		}

		>view:nth-of-type(4) {
			margin-top: 80rpx;
			width: 350rpx;
			display: flex;
			font-size: 35rpx;
			align-items: center;
			justify-content: center;
			background-color: #4AC997;
			color: #FFFFFF;
			padding: 15rpx;
			border-radius: 40rpx;
		}
	}
</style>
